<template>
	<tm-app ref="app" style="width:100%">
		<view class="allBox" v-focus="'auto'">
			<view class="headBox">
				<tm-image :preview="false" :width="250" :height="250" src="../../static/login/login-icon.jpg"></tm-image>
			</view>
			<view class="mainBox">
				<h1 class="title">登录</h1>
				<view class="titleTips"> 欢迎使用家医医生端 </view>
				<view class="loginForm">
					<tm-form @submit="loginConfirm" ref="loginForm" v-model="loginValues" :label-width="190" class="loginHead">
						<tm-text _class="text-overflow-1" label="账号"></tm-text>
						<tm-form-item :border="false" required field="account" :rules="[
                {
                  required: true,
                  message: '不能为空',
                  validator: (val) => val.length > 0,
                },
              ]">
							<!-- 不要问我为什么用v-model.lazy，我很受伤。 -->
							<tm-input :inputPadding="[0, 0]" v-model.lazy="loginValues.account" :showBottomBotder="false">
							</tm-input>
						</tm-form-item>
						<tm-text _class="text-overflow-1" label="密码"></tm-text>
						<tm-form-item :border="false" required field="pwd" :rules="[
                {
                  required: true,
                  message: '不能为空',
                  validator: (val) => val.length > 0,
                },
              ]">
							<!-- 不要问我为什么用v-model.lazy，我很受伤。 -->
							<tm-input password :inputPadding="[0, 0]" v-model.lazy="loginValues.pwd">
							</tm-input>
						</tm-form-item>
						<view class="tips">
							<tm-checkbox outlined v-model="loginValues.agree"></tm-checkbox>
							<tm-text color="#d3cdd9" label="我已阅读并同意" size="28"></tm-text>
							<tm-text color="#3dd4a7" label="《用户隐私协议政策》" size="28"></tm-text>
						</view>
						<!-- 按钮 -->
						<tm-button width="100%" fontColor="#4ad5b8" :margin="[10]" text :border="2" size="normal" label="登录"
							@tap="loginConfirm"></tm-button>
					</tm-form>
					<view class="forgetTip">
						<tm-text _class="text-overflow-1" label="忘记密码请联系管理员" color="#c9c9c9"></tm-text>
					</view>
				</view>
			</view>
		</view>
	</tm-app>
</template>

<script lang="ts" setup>
	/**@data */
	import { reactive, ref, effect } from "vue";
	import { accountApi } from "@/apis/modules/account";
	import { onShow } from "@dcloudio/uni-app";
	import { useUserStore } from "@/stores/index";
	import TmApp from "@/tmui/components/tm-app/tm-app.vue";
	import { loginSync } from "@/apis/modules/user"
	const loginForm = ref();
	const show = ref(false);
	const loginValues = ref({
		account: "17760998888",
		pwd: "123456",
		agree: true,
	});
	/**@method */
	const loginConfirm = async () => {
		try {
			const { data } = await accountApi.userLogin({
				account: loginValues.value.account,
				pwd: loginValues.value.pwd,
			});
			// uni.showToast({
			// 	title: JSON.stringify(data),
			// 	duration: 2000,
			// 	icon: "success"
			// })
			if (data && data.token) {
				useUserStore().setToken(data.token); //存储token和个人信息
				useUserStore().saveUserInfo(data);
				uni.navigateTo({
					url: "/pages/layout/index",
				});
			}
		} catch (error) {
			uni.showToast({
				title: JSON.stringify(error),
				duration: 2000,
				icon: "error"
			})
		}
	};

	// 页面生命周期
	onShow(() => {
		// 判断是否已经登录
		// loginConfirm()
		if (useUserStore().drToken) {
			uni.navigateTo({
				url: "/pages/layout/index",
			});
		}
	});
	// const logeffect = effect(
	//   () => {
	//     console.log(111);
	//   },
	//   {
	//     scheduler: (fin) => {
	//       // 变成微任务
	//       Promise.resolve().then(() => fin())
	//     },
	//   }
	// );
	// setTimeout(() => {
	//   console.log("宏任务");
	// }, 1);
</script>

<style lang="scss">
	@import "./index.scss";
</style>